<template>
  <div class="wrapper">
    <div>{{ arrayList }}</div>
    <button @click="changeArr">修改数组</button>
    <div>{{ object }}</div>
    <button @click="changeObj">修改对象</button>
  </div>
</template>

<script>
export default {
  name: "WatchObjectComponent",
  components: {},
  props: {},
  data() {
    return {
      arrayList: [0, 1, 2, 3, 4, 5, 6],
      object: {
        name: "OrzR3",
        age: 12,
      },
    };
  },
  watch: {
    arrayList: {
      handler(newValue, oldValue) {
        console.log("arrayList监听器");
        console.log(newValue);
        console.log(oldValue);
      },
    },
    object: {
      handler(newValue, oldValue) {
        console.log("object监听器");
        console.log(newValue);
        console.log(oldValue);
      },
      deep: true,
    },
  },
  methods: {
    changeArr() {
      this.arrayList = ["9527"];
      console.log("这是修改之后的数组", this.arrayList);
    },
    changeObj() {
      this.object = new Object({
        name: "前端老实人",
        age: 12,
      });
      console.log("这是修改之后的对象", this.object);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.wrapper {
}
</style>
